<script setup lang="ts">
import { ref, watch } from 'vue'
import { useMouseInElement } from '@vueuse/core'
const props = defineProps({
  goodsInfo: {
    type: Object,
  },
})
// 图片列表
const picturesList = ref('')
// 点击小图片获取的图片下标
const picNumber = ref(0)
// 图片加载
const loading = ref(true)

// 图片加载完毕
const time = setInterval(() => {
  if (props.goodsInfo) {
    picturesList.value = props.goodsInfo?.mainPictures
    loading.value = false
    clearInterval(time)
  }
}, 1000)
// 鼠标点击小图切换大图
const mouseClick = (i: number) => {
  picNumber.value = i
}

// 获取鼠标的相对位置
const target = ref(null)
// elementX：鼠标在页面的x坐标，elementY：鼠标在页面的y坐标，isOutside：鼠标是否在元素外
const { elementX, elementY, isOutside } = useMouseInElement(target)

// 滑块的运动
const sliderLeft = ref(0)
const sliderTop = ref(0)

// 控制大图
const bigX = ref(0)
const bigY = ref(0)

watch([elementX, elementY, isOutside], () => {
  // 鼠标没有在元素内，直接不执行后面的逻辑
  if (isOutside.value) return

  // 控制滑块的横向距离
  if (elementX.value > 100 && elementX.value < 300) {
    sliderLeft.value = elementX.value - 100
  }

  // 控制滑块的纵向距离
  if (elementY.value > 100 && elementY.value < 300) {
    sliderTop.value = elementY.value - 100
  }

  // 处理边界
  if (elementX.value > 300) {
    sliderLeft.value = 200
  }
  if (elementX.value < 100) {
    sliderLeft.value = 0
  }

  if (elementY.value > 300) {
    sliderTop.value = 200
  }
  if (elementY.value < 100) {
    sliderTop.value = 0
  }

  // 控制大图的横向位移
  bigX.value = -sliderLeft.value * 2
  bigY.value = -sliderTop.value * 2
})
</script>

<template>
  <div
    class="box"
    element-loading-text="Loading..."
    element-loading-background="rgba(0, 0, 0, 0.135)"
  >
    <!-- 左侧大图 -->
    <div class="letf-bigImage" ref="target" v-loading="loading">
      <img :src="goodsInfo ? picturesList[picNumber] : ''" alt="" />
      <!-- 中间小阴影图 -->
      <div
        class="min-Shadow"
        v-show="!isOutside"
        :style="{ top: `${sliderTop}px`, left: `${sliderLeft}px` }"
      ></div>
    </div>
    <!-- 右侧小图 -->
    <ul class="right-minImage">
      <li
        v-for="(item, i) in picturesList"
        :key="i"
        @click="mouseClick(i)"
        :class="{ active: i === picNumber }"
      >
        <img :src="item" alt="" />
      </li>
    </ul>
    <!-- 右侧大图 -->
    <div
      v-show="!isOutside"
      class="right-bigImage"
      :style="{
        backgroundImage: `url(${picturesList[picNumber]})`,
        backgroundPositionX: `${bigX}px`,
        backgroundPositionY: `${bigY}px`,
      }"
    ></div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 480px;
  height: 400px;
  position: relative;
  .letf-bigImage {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    img {
      width: 400px;
      height: 400px;
    }
    .min-Shadow {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.135);
    }
  }
  .right-minImage {
    width: 70px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 410px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    li {
      width: 70px;
      height: 70px;
      list-style: none;
      cursor: pointer;
      &:hover,
      &.active {
        border: 1px solid blue;
      }
      img {
        width: 68px;
        height: 68px;
      }
    }
  }
  .right-bigImage {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 410px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    // 背景图:盒子的大小 = 2:1
    // 将来控制背景图的移动来实现放大的效果查看 background-position
    background-size: 800px 800px;
  }
}
</style>
